<template>
    <div class="person">
        <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changefirstname">修改游戏名称</button>
    </div>
</template>

<!-- 下载插件，就可以对文件名进行修改，今日少写一个script 标签 -->
<script lang="ts" setup name="car">   //加了setup，会不用再进行数据返回的操作，不用return ,自动导出
    //导入 reactive
    import {ref,reactive} from 'vue';
    //数据
    let car = ref({brand:'大众',price:100});
    // console.log(car);
    let games = ref([
        {id:'01',name:'燕云十六声'},
        {id:'02',name:'光遇'},
        {id:'03',name:'Phigros'}
    ])
    // 方法
    function changePrice(){
        car.value.price += 10;
    }
    function changefirstname(){
        games.value[1].name = '汤姆猫跑酷';
    }
</script>
<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>